<template>
  <div id="newdate"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      array: []
    }
  },
  props: ['allnumlist'],
  watch: {
    allnumlist: function (newVal, oldVal) {
      this.array = newVal
      this.renderline()
    }
  },
  methods: {
    // 生成7天日期列表
    getWeek(day) {
      const today = new Date()
      const targetday = today.getTime() + 1000 * 60 * 60 * 24 * day
      // 生成新的时间实例
      today.setTime(targetday)
      let tMonth = today.getMonth() + 1 // 月
      let tDate = today.getDate() // 日
      tMonth = tMonth < 10 ? '0' + tMonth : tMonth
      tDate = tDate < 10 ? '0' + tDate : tDate
      return tMonth + '/' + tDate
    },
    renderline() {
      const myPieChart = echarts.init(document.getElementById('newdate'))
      const timelist = []
      for (let i = -6; i < 1; i++) {
        timelist.push(this.getWeek(i))
      }
      const alllist = this.array
      const pieitem = {
        dongche: alllist.find(item => item.name === '懂车帝').value,
        guazi: alllist.find(item => item.name === '瓜子二手车').value,
        qiche: alllist.find(item => item.name === '汽车街').value,
        renren: alllist.find(item => item.name === '人人车').value
      }

      const pieOption = {
        // 鼠标移入的提示
        tooltip: {
          trigger: 'axis'
        },
        // 网格
        grid: {
          top: '15%',
          right: '4%',
          bottom: '3%',
          left: '0%',
          // show: true, // 显示网格的边框
          containLabel: true // 网格包括坐标轴的文字
          // borderColor: '#012f4a'
        },
        xAxis: {
          type: 'category',
          data: timelist,
          // data: name,
          // 去除轴线
          axisLine: {
            show: true
          },
          // 刻度设置
          axisTick: {
            // 不显示刻度
            show: false
          },
          // 文字调整
          axisLabel: {
            color: '#4c9bfd' // x轴文字颜色
          },
          splitLine: {
            show: false
          },
          // 两边的留白策略
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          // 去除轴线
          axisLine: {
            show: true
          },
          // 文字调整
          axisLabel: {
            color: '#4c9bfd' // x轴文字颜色
          },
          // 不显示刻度
          axisTick: {
            show: false
          },
          // Y轴分割线（图表中的哪些横线）
          splitLine: {
            show: false
          }
        },
        // 图例（图例和series中的数据有关系，保证series中的数据有 nam
        legend: {
          textStyle: {
            color: '#4c9bfd' // 图例文字颜色
          },
          right: '14%' // 距离右边10%
        },
        color: ['#ed3f35'],
        series: [
          // 下面的一个对象，表示一条线
          {
            name: '懂车帝',
            data: pieitem.dongche,
            type: 'line',
            // 线条的拐点平滑过度
            smooth: true,
            itemStyle: {
              color: 'red'
            }
          },
          // 下面的一个对象，表示一条线
          {
            name: '瓜子二手车',
            data: pieitem.guazi,
            type: 'line',
            // 线条的拐点平滑过度
            smooth: true,
            itemStyle: {
              color: 'blue'
            }
          },
          {
            name: '汽车街',
            data: pieitem.qiche,
            type: 'line',
            // 线条的拐点平滑过度
            smooth: true,
            itemStyle: {
              color: 'yellow'
            }
          },
          {
            name: '人人车',
            data: pieitem.renren,
            type: 'line',
            // 线条的拐点平滑过度
            smooth: true,
            itemStyle: {
              color: '#00f2f1'
            }
          }
        ]
      }

      myPieChart.setOption(pieOption)
    }
  }
}
</script>
<style lang="less" scoped>
#newdate {
  width: 100%;
  height: 100%;
}
</style>
